@import "../../styles/base";

.GameKingRank {
  color: white;
  padding-top: tovw(750);
  padding-bottom: tovw(200);
  background: #230B31 url("./images/banner.png") top center / 100% no-repeat;
  min-height: 100vh;
  position: relative;

  .time-msg {
    font-size: tovw(36);
    color: #FFF97F;
    text-align: center;
    text-shadow: 0 tovw(2) tovw(4) rgba(0, 0, 0, 0.50);
    font-weight: 500;
    margin-top: -12vw;
    padding: 2vw;
  }

  main {
    position: relative;
    overflow: hidden;
    background: url("./images/bg-header.png") center top / 100% no-repeat,
    url("./images/bg-mid.png") center tovw(240) / 100% repeat-y, #230B31;
    margin-top: -10.5vw;
    padding: 10vw 6vw 0;
    min-height: tovw(750);
  }

  .bg-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: url("./images/bg-bottom.png") center bottom / 100% no-repeat;
    height: 8vw
  }

  .parent-tabs {
    padding: 0 4vw;
    margin-bottom: 3.2vw;
    margin-top: 3.2vw;
    position: sticky;
    top: 0;
    z-index: 10;
    left: 2.3vw;
    right: 2.3vw;

    li {
      width: 50%;
      height: tovw(70);
      font-size: tovw(24);
      color: #3B0200;
      text-align: center;
      font-weight: 700;
      background: url("./images/tab.png") center center / 100% no-repeat;
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        color: #3B0200;
        background-image: url("./images/tab-active.png");
      }

      &::before {
        display: none;
      }
    }
  }

  .stag-wrap {
    overflow-x: auto;
    width: calc(100% - #{tovw(40)});
    margin: auto;
  }

  .stage-tabs {
    margin-bottom: tovw(20);
    margin-top: tovw(20);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 180%;
    transition: all .2s ease;

    li {
      flex: 0 0 tovw(180);
      height: tovw(65);
      font-size: tovw(22);
      color: rgba(255, 246, 165, .4);
      text-align: center;
      font-weight: 700;
      background: #4F0800;
      border: tovw(1) solid rgba(170, 98, 75, 1);;
      box-shadow: 0 tovw(4) 0 0 rgba(0, 0, 0, 0.5);
      border-radius: tovw(32.5);
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: tovw(7);
      flex-wrap: nowrap;
      white-space: nowrap;

      &.active {
        color: #FFF6A5;
        box-shadow: 0 tovw(4) 0 0 rgba(236, 86, 21, 0.5);
        background-image: linear-gradient(180deg, #A3483A 0%, #6A231B 100%);
        border: tovw(1) solid rgba(255, 233, 147, 1);
      }

      &::before {
        display: none;
      }

      .name {
        margin-bottom: tovw(6);
      }
    }
  }

  .rank-info {
    width: 50vw;
    text-align: center;
    font-size: tovw(32);
    color: #FFF6A5;
    font-weight: 500;
    background: url("./images/decorator.png") center left / tovw(25) no-repeat,
    url("./images/decorator.png") center right / tovw(25) no-repeat;
    margin: 2vw auto;

    &.daily-list-msg {
      width: 70vw;
      font-size: tovw(24);
    }
  }

  .rank-over {
    font-size: tovw(32);
    color: #FFF6A5;
    font-weight: 500;
    text-align: center;
    margin: 1vw auto;
  }

  .countdown {
    font-size: tovw(32);
    color: #FFF6A5;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;

    .day {
      margin-right: tovw(12.5);
    }

    .time {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: tovw(50);
      height: tovw(50);
      background-color: #A21000;
      border: tovw(1) solid  rgba(255,233,147,1);
      border-radius: tovw(6);
    }

    .dot {
      margin: 0 tovw(8)
    }
  }

  .record-btn {
    color: #FFF97F;
    text-align: center;
    font-weight: 600;
    font-size: tovw(24);
    letter-spacing: 0;
    width: tovw(197);
    height: tovw(67);
    background: linear-gradient(180deg, #A3655C 0%, #71231A 100%), #A3655C;
    border: tovw(1) solid rgba(255, 233, 147, 1);
    box-shadow: 0 tovw(4) 0 0 rgba(48, 0, 0, 0.66);
    border-radius: tovw(12);
    position: absolute;
    top: tovw(350);
    right: tovw(2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rule-btn {
    color: #FFF97F;
    text-align: center;
    font-weight: 600;
    font-size: tovw(24);
    letter-spacing: 0;
    background-color: #A3655C;
    width: tovw(134);
    height: tovw(67);
    background-image: linear-gradient(180deg, #A3655C 0%, #71231A 100%);
    border: tovw(1) solid rgba(255, 233, 147, 1);
    box-shadow: 0 tovw(4) 0 0 rgba(48, 0, 0, 0.66);
    border-radius: tovw(12);
    position: absolute;
    top: tovw(442);
    right: tovw(2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rank-list {
    font-size: tovw(24);
    color: #FFF6A5;
    letter-spacing: 0;
    font-weight: 500;
    margin: tovw(20) auto auto;
    padding-bottom: 3vw;
    overflow-y: auto;

    .task-item {
      height: tovw(118);
      background: rgba(57,25,17,0.6);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 tovw(14);
      position: relative;

      .text {
        font-size: tovw(24);
        color: #FFF6A5;
        font-weight: 500;
        margin: 0 0 tovw(4) tovw(36);
      }

      .task-box {
        height: tovw(100);
        width: tovw(100);
        background: url("./images/gift-box.png") center left / tovw(100) no-repeat;
        position: absolute;
        left: tovw(14);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        &.done {
          background-image: url("./images/gift-box-open.png");
        }
      }

      .task-progress {
        padding-left: tovw(80);
      }

      .receive-btn {
        color: #571E04;
        font-size: tovw(22);
        text-align: center;
        font-weight: 700;
        width: tovw(140);
        height: tovw(61);
        background: url("./images/not-received.png") center left / 100% no-repeat;

        &[disabled] {
          color: #777777;
          background-image: url("./images/received.png")
        }
      }
    }

    .item {
      margin-top: tovw(6);
      height: tovw(120);
      position: relative;

      .normal-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding-bottom: 2vw;

        .advanced {
          position: absolute;
          top: tovw(-8);
          left: tovw(-2);
          height: tovw(45);
          object-fit: contain;
        }

        .rank-num {
          width: tovw(80);
          height: tovw(72);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: tovw(24);
          color: #FFF6A5;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
        }

        .avatar {
          width: tovw(80);
          height: tovw(80);
          border: tovw(1) solid #5E3426;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user-info {
          flex: 1;
          margin-left: tovw(20);

          .name {
            font-size: tovw(24);
            letter-spacing: 0;
            font-weight: 400;
            width: 40vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .num {
          color: #FFF6A5;
          text-align: center;
          font-weight: 400;
          padding-left: tovw(44);
          background: url("./images/coin.png") right center / tovw(34) no-repeat;
          font-size: tovw(24);
          display: flex;
          align-items: center;
          padding-right: tovw(50);
          margin-right: tovw(25);
          height: 100%;
        }
      }

      &.item-rank:nth-of-type(1) .normal-item{
        background: url("./images/top1-bg.png") center center / 103% no-repeat;

        .avatar {
          border-color: transparent;
          box-shadow: 0 0 0 tovw(2) #F8E46A,  0 0 0 tovw(4) #FEB716;
        }
      }

      &.item-rank:nth-of-type(2) .normal-item {
        background: url("./images/top2-bg.png") center center / 103% no-repeat;

        .avatar {
          border-color: transparent;
          box-shadow: 0 0 0 tovw(2) #F4CBF1,  0 0 0 tovw(4) #DEB1FB;
        }
      }

      &.item-rank:nth-of-type(3) .normal-item {
        background: url("./images/top3-bg.png") center center / 103% no-repeat;

        .avatar {
          border-color: transparent;
          box-shadow: 0 0 0 tovw(2) #E5BC98,  0 0 0 tovw(4) #DF8D5F;
        }
      }

      &.item-self {
        display: flex;
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        right: 0;
        height: tovw(127.5);
        background: url("./images/self-bg.png") center center / 100% no-repeat;
        justify-content: space-around;
      }
    }

    .more {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: tovw(26);
      color: #FFFFFF;
      font-weight: 700;
      padding-top: tovw(30);

      img {
        width: tovw(38);
        height: tovw(38);
        margin-right: tovw(12);
        animation: rotateMore 1.5s linear infinite;
      }
    }
  }

  .empty {
    padding: tovw(40);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    img {
      height: tovw(250);
      object-fit: contain;
    }

    p {
      width: tovw(450);
      font-size: tovw(32);
      color: #FFF6A5;
      text-align: center;
      font-weight: 500;
      opacity: 0.5;
      margin: 0
    }
  }

  .progress {
    color: #FFF6A5;
    width: tovw(370);
    height: tovw(33);
    font-size: tovw(24);
    text-align: right;
    font-weight: 500;
    position: relative;
    border-radius: tovw(19);
    background: #290018;
    border: tovw(2) solid rgba(138,86,67,1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: tovw(10);

    .inner {
      background-image: linear-gradient(90deg, #FF5F56 0%, #FF9128 100%);
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      border-radius: tovw(19);
    }
  }

  .my-progress {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;

    .info {
      width: 100%;
      font-size: tovw(20);
      color: #FFF6A5;
      text-align: center;
      font-weight: 400;
      margin-top: tovw(6);
    }

    .done-btn {
      width: tovw(201);
      height: tovw(61);
      background: url("./images/done.png") center left / 100% no-repeat;

      &[disabled] {
        background-image: url("./images/not-done.png")
      }
    }
  }

  .reward-list {
    display: flex;
    justify-content: space-around;
    padding: tovw(5);
    overflow-x: auto;

    .reward-list-item {
      flex: 0 0 tovw(120);
      height: 17.5vw;
      background: url("./images/award-bg.png") center center / 100% no-repeat;
      border-radius: tovw(10);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: tovw(5);

      span {
        font-size: tovw(24);
        color: #F9D08C;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;

        &.icon {
          padding-right: tovw(36);
          &.diamond {
            background: url("./images/diamonds.png") right center / tovw(30) tovw(20) no-repeat;
          }
        }
      }
    }
  }

  .award-modal {
    .modal-body {
      width: tovw(600);
      height: tovw(750);
      background-color: #421B0F;
      border: tovw(7) solid rgba(255,226,173,1);
      border-radius: tovw(19);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: tovw(60) tovw(30) tovw(54);
      overflow: hidden;

      .title {
        line-height: tovw(53);
        font-size: tovw(44.4);
        color: #F9D08C;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }

      .award-images {
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
        overflow-x: auto;

        li {
          flex: 0 0 tovw(240);

          .gift-img {
            background: #36150B;
            border-radius: tovw(10);
            height: tovw(260);
            padding: tovw(24) tovw(8);

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .gift-name {
            width: tovw(250);
            height: tovw(41);
            font-size: tovw(28.8);
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: tovw(20);
          }
        }
      }

      button {
        font-size: tovw(44);
        color: #571E04;
        text-align: center;
        font-weight: 700;
        width: tovw(280);
        height: tovw(122);
        background: url("./images/confirm-btn.png") center center / 100% no-repeat;
      }
    }
  }
}


.heartBeat {
  animation: heartBeat 2s ease-in-out infinite;
}

.shine {
  overflow: hidden;

  &:after {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shineAni 3s ease-in-out infinite;
  }
}

@keyframes shineAni {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.1);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes rotateMore {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
